<template>
  <!-- 顶部 -->
  <div class="header">
    <h1>个人中心</h1>
    <div class="person">
      {{name}}
      <ul>
        <li><router-link active-class="active" to="/other/personinfo">个人信息</router-link></li>
        <!-- <li><router-link active-class="active" to="/other/message">我的消息</router-link></li> -->
        <li><router-link active-class="active" to="/other/addmember">添加成员</router-link></li>
        <li><router-link active-class="active" to="/other/bug">提交反馈</router-link></li>
        <li><router-link active-class="active" to="/main/organizationInfo">返回</router-link></li>
      </ul>
    </div>
  </div>

  <!-- 操作界面 -->
  <div class="main">
    <div class="left">
      <ul>
        <router-link active-class="active" to="/other/personinfo">
          <li>
            <div class="tag_out">
              <div class="fontcontent">
                <el-icon color="#409EFC" :size="20"><Cpu /></el-icon>
              </div>
              <div class="content">
                <span>个人信息</span>
              </div>
            </div>
          </li></router-link
        >
        <!-- <router-link active-class="active" to="/other/message">
          <li>
            <div class="tag_out">
              <div class="fontcontent">
                <el-icon color="#409EFC" :size="20"><ChatDotRound /></el-icon>
              </div>
              <div class="content">
                <span>我的消息</span>
              </div>
            </div>
          </li></router-link
        > -->
        <router-link active-class="active" to="/other/addmember">
          <li>
            <div class="tag_out">
              <div class="fontcontent">
                <el-icon color="#409EFC" :size="20"><User /></el-icon>
              </div>
              <div class="content">
                <span>添加成员</span>
              </div>
            </div>
          </li></router-link
        ><router-link active-class="active" to="/other/bug">
          <li>
            <div class="tag_out">
              <div class="fontcontent">
                <el-icon color="#409EFC" :size="20"><Burger /></el-icon>
              </div>
              <div class="content">
                <span>提交反馈</span>
              </div>
            </div>
          </li></router-link
        >
      </ul>
    </div>

    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import {
  Cpu,
  User,
  Burger,
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "Main",
  setup(){
    let name = ref("")
    const store = useStore()
    onMounted(()=>{
      name.value = store.state.usernow.name[0]
    })
    return{
      name
    }
  },
  components: { Cpu, User, Burger, },
};
</script>

<style lang="less" scoped>
.header {
  height: 7%;
  width: 100%;
  border-bottom: 3px solid #ccc;
  position: relative;
  h1 {
    margin-left: 2%;
    float: left;
  }
  .person {
    float: right;
    height: 100%;
    width: 3.5%;
    margin-right: 3.5%;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: orange;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover ul {
      display: block;
    }
    ul {
      display: none;
      position: absolute;
      top: 102%;
      right: 0.5%;
      border: 1px solid #ccc;
      border-radius: 7%;
      list-style: none;
      color: black;
      font-size: 16px;
      background-color: rgb(250, 250, 250);
      box-shadow: 0px 0px 10px 2px #ccc;
      li {
        list-style: none;
        height: 50px;
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-top: 1px solid #ccc;
        &:first-child {
          border-top: none;
        }
        a{
          text-decoration: none;
          color: black;
        }
      }
    }
  }
}

.main {
  height: 92%;
  width: 100%;
  .left {
    width: 15%;
    height: 100%;
    float: left;
    border-right: 1px solid #ccc;
    ul {
      height: 100%;
      list-style: none;
      a {
        text-decoration: none;
        width: 100%;
        height: 10%;
        color: black;
        display: flex;
        li {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .tag_out {
            width: 100%;
            .fontcontent {
              width: 15%;
              height: 100%;
              padding-left: 15%;
              float: left;
            }
            .content {
              display: inline-block;
              width: 70%;
              height: 100%;
              text-align: center;
            }
          }
          &:hover {
            background-color: rgb(221, 245, 255);
          }
        }
      }
    }
  }
  .right {
    width: 85%;
    height: 100%;
    margin-left: 15%;
  }
}
</style>